<template>
    <div class="login-bg">
        <div
            class="absolute inset-0 text-slate-900/[0.07] [mask-image:linear-gradient(to_bottom_left,white,transparent,transparent)]">
            <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <pattern id="grid-bg" width="32" height="32" patternUnits="userSpaceOnUse" x="100%"
                        patternTransform="translate(0 -1)">
                        <path d="M0 32V.5H32" fill="none" stroke="currentColor"></path>
                    </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#grid-bg)"></rect>
            </svg>
        </div>
        <el-row class="login-container" justify="center" :align="'middle'">
        <el-card style="max-width: 480px;">
            <template #header>
                <div class="card-header">
                    <img :src="imgUrl" alt="">
                </div>
            </template>
            <div class="jump-link">
                <el-link type="primary" @click="handleChange">{{ formType ? '返回登录' : '注册帐号' }}</el-link>
            </div>
            <el-form ref="loginFormRef" :model="loginForm" style="max-width:600px;" class="demo-ruleForm" :rules="rules">
                <el-form-item prop="userName">
                    <el-input v-model="loginForm.userName" placeholder="手机号" :prefix-icon="UserFilled"></el-input>
                </el-form-item>
                <el-form-item prop="passWord">
                    <el-input v-model="loginForm.passWord" type="password" placeholder="密码" :prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item v-if="formType" prop="validCode">
                    <el-input v-model="loginForm.validCode" type="password" placeholder="验证码" :prefix-icon="Lock">
                        <template #append>
                            <span @click="countdownChange">{{ countdown.validText }}</span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :style="{width: '100%'}" @click="submitForm(loginFormRef)">
                        {{ formType ? '注册帐号' : '登录' }}
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
</div>
</template>
<script setup>
import { reactive, ref, computed, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { getCode, userAuthentication, login, menuPermissions } from '@/api'
import { UserFilled, Lock } from '@element-plus/icons-vue'

const imgUrl = new URL('../../../public/login-head.png', import.meta.url).href

const loginForm = reactive({
    userName:'',
    passWord:'',
    validCode:''
})
// 切换表单 0登录 1注册
const formType = ref(0)
//点击切换登录或注册
const handleChange = () => {
    formType.value = formType.value ? 0 : 1
}
// 帐号校验规则
const validateUser = (rule, value, callback) => {
    if(value === ''){
        callback(new Error(`请输入账号`))
    } else {
        const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        phoneReg.test(value) ? callback() : callback(new Error('手机号格式不对，请输入正确手机号'))
    }
}
//密码校验
const validatePass = (rule, value, callback) => {
    if(value === ''){
        callback(new Error(`请输入密码`))
    } else {
        const reg = /^[a-zA-Z0-9_-]{4,16}$/
        reg.test(value) ? callback() : callback(new Error('密码格式不对，需要4到16位字符，请确认格式'))
    }
}
// 表单校验
const rules = reactive({
    userName:[{validator:validateUser, trigger:'blur'}],
    passWord:[{validator:validatePass, trigger:'blur'}]
})
//发送短信
const countdown = reactive({
    validText:'获取验证码',
    time: 60
})
let flag = false
const countdownChange = () => {
    //如果已发送不处理
    if(flag) return
    //判断手机号是否正确
    const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if(!loginForm.userName || !phoneReg.test(loginForm.userName)) {
        return  ElMessage({
            message: '请检查手机号是否正确!',
            type: 'warning',
        })
    }
    //倒计时
    const time = setInterval(() =>{
        if(countdown.time <= 0) {
            countdown.time = 60
            countdown.validText = '获取验证码'
            flag = false
            clearInterval(time)
        } else{
            countdown.time -= 1
            countdown.validText = `剩余${countdown.time}s`
        }
    },1000)
    flag = true
    getCode({tel: loginForm.userName}).then(({data}) => {
        console.log('data', data)
        if(data.code === 10000){
            ElMessage.success('发送成功')
        }
    })
}
const router = useRouter()
const loginFormRef = ref()
const store = useStore()
const routerList = computed(() => store.state.menu.routerList)
// 表单提交
const submitForm = async (formEl) => {
    if(!formEl) return
    await formEl.validate((valid, fields) => {
        if(valid) {
            console.log(loginForm, 'submit!')
            //注册页面
            if(formType.value){
                userAuthentication(loginForm).then(({data}) => {
                    if(data.code === 10000){
                        ElMessage.success('注册成功，请登录')
                        formType.value = 0
                    }
                })
            }else{
                //登录页面
                login(loginForm).then(({data}) => {
                    if(data.code === 10000) {
                        ElMessage.success('登录成功！')
                        console.log(data)
                        //将token和用户信息缓存到浏览器
                        localStorage.setItem('pz_token', data.data.token)
                        localStorage.setItem('pz_userInfo', JSON.stringify(data.data.userInfo))
                        menuPermissions().then(({ data }) => {
                            store.commit('dynamicMenu', data.data)
                            toRaw(routerList.value).forEach(item => {
                                router.addRoute('main', item)
                            })
                            router.push('/')
                        })

                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>
<style lang="scss" scoped>
:deep(.el-card__header) {
  padding: 0;
}
.login-bg{
    min-height: 100vh;
    background: url('@/assets/images/pz-bg.jpg') no-repeat;
    background-size: cover;
    overflow: hidden;
}
.login-container {
  height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  .card-header {
    background-color: #899fe1;
    img {
      width: 430px;
    }
  }
  .jump-link {
    text-align: right;
    margin-bottom: 10px;
  }
  .el-input__suffix-inner {
    cursor: pointer;
  }
}
</style>
